<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="lcx">
        <title>下拉菜单</title>
        <script src="jquery-3.1.1.js"></script>
        <style> 
            header{
                width: 900px;
                height: 60px;
                margin: 0px auto;
                background-color: #666;
              
            }
            header a {
                display: inline-block;
                text-decoration: none;
                color: white;
                width: 200px;
                text-align: center;
                line-height: 60px;
            }
             header a:hover {
                text-decoration: none;
                color: orange;
                text-decoration: underline;
            }
            ul,li{
                margin: 0;
                padding: 0;
            }
            nav{
                width: 900px;
                height: 400px;
                margin: 0px auto;
                position: relative;
            }
            nav ul{
                width: 120px;
                height: 150px;
                border: 1px solid #666;
                border-top: none;
                position: absolute;
                display: none;
            }
            nav ul:nth-of-type(1){
                left: 40px;
            }
            nav ul:nth-of-type(2){
                left: 240px;
            }
            nav ul:nth-of-type(3){
                left: 440px;
            }
            nav ul:nth-of-type(4){
                left: 660px;
            }
            nav ul li:hover{
                text-decoration: underline;
            }
            nav ul li{
                list-style: none;
                text-align: center;
                line-height: 45px;
                color: #999;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <header>
            <a href="">公司简介</a>
            <a href="">产品介绍</a>
            <a href="">联系我们</a>
            <a href="">人才招聘</a>
        </header>
        <nav>
            <ul>
                <li>概况介绍</li>
                <li>发展历史</li>
                <li>公司实力</li>
            </ul>
            <ul>
                <li>软件开发</li>
                <li>软件教育</li>
                <li>天使投资</li>
            </ul>
            <ul>
                <li>公司地址</li>
                <li>练习方式</li>
                <li>投资加盟</li>
            </ul>
            <ul>
                <li>iOS招聘</li>
                <li>HTML5招聘</li>
                <li>PHP招聘</li>
            </ul>
        </nav>
    </body>
</html>
<script>
   $('a').each(function(index){
     $(this).mouseenter(function(){
         var num = $(this).index();
         var ul = $($('ul')[num]);
         ul.css('display','block').siblings().css('display','none');
     })
   })


</script>